<template>
  <div class="mouse-follow-image" ref="boxRef">
    <slot class="item"></slot>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue";

const boxRef = ref(null); // 使用 ref 来获取 DOM 元素

// 定义鼠标移动事件的处理函数
const move = (ev) => {
  if (boxRef.value) {
    const box = boxRef.value;
    const {clientWidth, clientHeight} = document.documentElement; // 获取视口的宽度和高度
    const {width, height} = box.getBoundingClientRect(); // 获取元素的宽度和高度

    // 计算鼠标位置，确保元素不超出页面边界
    const newX = Math.min(Math.max(ev.pageX - width / 2, 0), clientWidth - width); // 防止超出左右边界
    const newY = Math.min(Math.max(ev.pageY - height / 2, 0), clientHeight - height); // 防止超出上下边界

    // 设置元素的位置
    box.style.left = `${newX}px`;
    box.style.top = `${newY}px`;
  }
};

// 在组件挂载时添加事件监听
onMounted(() => {
  window.addEventListener('mousemove', move);
});

// 在组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('mousemove', move);
});
</script>

<style scoped>
.mouse-follow-image {
  color: azure;
  position: fixed; /* 使用 fixed 定位，相对于视口 */
  left: 10px;
  top: 10px;
  height: 10rem;
  width: 10rem;
  transition: transform 0.1s ease; /* 平滑移动效果 */
  pointer-events: none; /* 避免鼠标事件被元素本身拦截 */
  background-color: rgba(0, 0, 0, 0.5); /* 添加半透明背景 */
  border-radius: 10px; /* 添加圆角 */
}
</style>